<template>
    <div>
        <!-- router-view -->
        <transition name="el-fade-in-linear">
            <router-view></router-view>
        </transition>
        <!-- tabbar -->
        <el-footer v-if="flag">
            <mt-tabbar v-model="selected">
                <mt-tab-item id="1" @click.native="toHome">
                    <router-link to="/home" tag="span" slot="icon" class="el-icon-eleme"></router-link>
                    首页
                </mt-tab-item>
                <mt-tab-item id="2" @click.native="toFind">
                    <router-link to="/find" tag="span" slot="icon" class="el-icon-discover"></router-link>
                    发现
                </mt-tab-item>
                <mt-tab-item id="3" @click.native="toOrder">
                    <router-link to="/order" tag="span" slot="icon" class="el-icon-document"></router-link>
                    订单
                </mt-tab-item>
                <mt-tab-item id="4" @click.native="toUser">
                    <router-link to="/user" tag="span" slot="icon" class="el-icon-user"></router-link>
                    我的
                </mt-tab-item>
            </mt-tabbar>
        </el-footer>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selected: '1',
            flag: true,
        }
    },
    watch: {
        '$route.path'(newVal) {
            if (newVal == '/login' || newVal == '/shop/' + this.$store.state.shopId || newVal == '/pay') return this.flag = false
            this.flag = true
        }
    },
    created() {        
        const path = this.$route.path
        if (path == '/find') {
            this.selected = '2'
        } else if (path == '/order') {
            this.selected = '3'
        } else if (path == '/user') {
            this.selected = '4'
        } else if (path == '/login') {
            this.flag = false;
        } else if (path == '/shop/' + this.$store.state.shopId) {
            this.flag = false;
        } else if (path == '/pay') {
            this.flag = false;
        }
    },
    methods: {
        toHome() {
            this.$router.push({path: '/home'})
        },  
        toFind() {
            this.$router.push({path: '/find'})
        },
        toOrder() {
            this.$router.push({path: '/order'})
        },
        toUser() {
            this.$router.push({path: '/user'})
        }
    }
}
</script>

<style>
    * { touch-action: pan-y;}
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    body {
        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
        line-height: 1.5;
        background: #f4f4f4;
        max-width: 540px;
        margin: 0 auto;
    }
    .container {
        position: relative;
        top: 0px;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
    }
    /* tabbar */
    .mint-tab-item-label {
        color: #8e8e93;
    }
    .is-selected .mint-tab-item-label {
        color: #0089dc;
    }
    /* 404 */
        .not img {
        display: block;
        width: 200px;
        height: 200px;
        margin: 0 auto;
    }
    .not h3 {
        color: #6a6a6a;
        font-weight: 400;
        font-size: 16px;
        text-align: center;
        margin: 13px 0;
    }
    .not .btn {
        display: block;
        margin: 0 auto;
    }
</style>

<style scoped>
    /* tabbar */
    .el-footer {
        position: fixed;
        z-index: 999;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        font-size: 20px;
    }
    .mint-tabbar {
        background-size: 100% 0px;
        box-shadow: 0 -0.266667vw 0.533333vw rgba(0,0,0,.1);
    }
    .mint-tab-item-icon span {
        font-size: 20px;
        color: #8e8e93;
        line-height: 30px;
    }
    .mint-tabbar > .mint-tab-item.is-selected {
        background-color: #fafafa;
    }
    .is-selected .mint-tab-item-icon span{
        color: #0089dc;
    }
</style>
